<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配置项visualMap: 视觉映射组件</title>
  <script src="./echarts.js"></script>
  <script src="./map/js/china.js"></script>

  <style lang="css">
    #chart1 {
      width: 800px;
      height: 800px;
      border: 1px solid red;
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>

  <script>
    function random () {
      return Math.round(Math.random() * 1000)
    }
    var myChart1 = echarts.init(document.getElementById('chart1'));

    myChart1.setOption({
      title: {
        id: 'txt',
        show: true,
        text: '视觉映射组件',
      },
      legend: { // 图例
      },
      visualMap: [
        {
          type: 'continuous',
          show: true, // 控制器是否显示
          left: 0, // 控制器的位置
          bottom: 150, // 控制器的位置
          min: 0,
          max: 1000,
          range: [300, 800], // 控制器选中的范围
          calculable: true,
          realtime: true,
          orient: 'vertical', // 'horizontal'
          text: ['high', 'low'],
          seriesIndex: 0,
          hoverLink: true,
          /* 同时设置控制器和目标的样式
          inRange: {
            color: ['pink'],
            // symbolSize: [30, 100]
          },
          outOfRange: {
            color: ['yellow'],
            // symbolSize: [30, 100]
          }, */
          /* // 分别设置设置控制器和目标的样式
          target: { // 目标
              inRange: {
                color: ['pink'],
              },
              outOfRange: {
                color: ['yellow']
              }
          },
          controller: { // 控制器
            inRange: {
              color: ['red'],
            },
            outOfRange: {
              color: ['blue']
            }
          }, */
          // 方式三，先全部定义，再给controller或者target单独设置其中一个就行
          inRange: {
            color: ['teal'],
            symbol: ['circle', 'rect'],
            // opacity: [0.1],
          },
          outOfRange: {
            color: ['yellow'],
            symbol: ['circle', 'rect'],
            // opacity: [0.1],
          },
          // controller: { // 控制器
          //   outOfRange: {
          //     color: ['blue']
          //   }
          // },
        }
      ],
      series: [
        {
          type: 'map',
          map: 'china',
          left: '2%',
          top: '2%',
          roam: false, // 是否开启鼠标缩放
          data: [ // 为了方便调试，下来的value值写死，不再使用random
            {
              "name": "北京",
              "value": 99
            },
            {
              "name": "天津",
              "value": 486
            },
            {
              "name": "上海",
              "value": 535
            },
            {
              "name": "重庆",
              "value": 646
            },
            {
              "name": "河北",
              "value": 870
            },
            {
              "name": "河南",
              "value": 247
            },
            {
              "name": "云南",
              "value": 516
            },
            {
              "name": "辽宁",
              "value": 307
            },
            {
              "name": "黑龙江",
              "value": 774
            },
            {
              "name": "湖南",
              "value": 409
            },
            {
              "name": "安徽",
              "value": 455
            },
            {
              "name": "山东",
              "value": 488
            },
            {
              "name": "新疆",
              "value": 682
            },
            {
              "name": "江苏",
              "value": 331
            },
            {
              "name": "浙江",
              "value": 903
            },
            {
              "name": "江西",
              "value": 873
            },
            {
              "name": "湖北",
              "value": 157
            },
            {
              "name": "广西",
              "value": 214
            },
            {
              "name": "甘肃",
              "value": 824
            },
            {
              "name": "山西",
              "value": 734
            },
            {
              "name": "内蒙古",
              "value": 577
            },
            {
              "name": "陕西",
              "value": 405
            },
            {
              "name": "吉林",
              "value": 518
            },
            {
              "name": "福建",
              "value": 738
            },
            {
              "name": "贵州",
              "value": 99
            },
            {
              "name": "广东",
              "value": 168
            },
            {
              "name": "青海",
              "value": 760
            },
            {
              "name": "西藏",
              "value": 329
            },
            {
              "name": "四川",
              "value": 498
            },
            {
              "name": "宁夏",
              "value": 143
            },
            {
              "name": "海南",
              "value": 194
            },
            {
              "name": "台湾",
              "value": 680
            },
            {
              "name": "香港",
              "value": 165
            },
            {
              "name": "澳门",
              "value": 790
            }
          ],
        }
      ]
    })
  </script>
</body>

</html>